MIndMeister で作成したマインドマップをブログ記事に埋め込んでみた
コンバンハ、千葉（幸）です。
Mind Meister はオンラインで使用できるマインドマッピングツールです。
作成したマップは複数人で共有することもできますし、ブログに埋め込むこともできます。
今回はブログに埋め込む手順をご紹介します。
MindMeister とは
改めて MindMeister とは、オンラインで使用できるマッピングツールです。
公式ページでは以下のようなメリットが謳われています。
- シンプルで直感的な UI デザイン
- チームで共同編集可能
- ブレスト、議事録、プレゼン資料など多彩な用途に対応
世の中にマインドマップツールはいくつもありますが、デバイスに限定されず使用できる点が気に入っており、数年前から使っています。（一人で。。）
料金プランは以下のように分かれています。無料プランでも、いくつか制約はつきますが基本的な機能は一通り使用できます。
無料プランで活用している例は以下をご参照ください。
Mind Miseter で作成したマップの埋め込み
実際に埋め込んでみた例が以下です。
これはテンプレートからそのまま作成しただけのマップです。さまざまなテンプレートが用意されていて面白いです。
マップの公開
埋め込む前にはマップの公開が必要です。
画面下部の [ 共有 ] ボタンを押下し、「マップを公開する」を選択します。
確認画面で [ マップを公開する ] を押下。
上記の手順が完了した段階で、マップはパブリックに公開された状態です。
埋め込みのリンクを取得
ここから更に、 [ マップを埋め込み ] を選択します。なお、マップに対して許可する操作をここで選択できます。
ウイザードで項目を選択すると、画面下部にコードが生成されます。（無料プランの場合、いくつかの項目は無効化できません。）
このコードをブログに貼り付ければ埋め込み完了です。
すべて選択した状態で生成されるコードは以下のようなものです。
<iframe width="600" height="400" frameborder="0" src="https://www.mindmeister.com/maps/public_map_shell/1745726149/project-plan?width=600&height=400&z=auto&live_update=1&presentation=1" scrolling="no" style="overflow: hidden; margin-bottom: 5px;">あなたのブラウザはディスプレイフレームに適していません。MindMeisterの<a href="https://www.mindmeister.com/1745726149/project-plan" target="_blank">Project Plan</a>を訪れてください。</iframe> <div class="mb-5"><a href="https://www.mindmeister.com/1745726149/project-plan" target="_blank">Project Plan</a> 所有者： <a href="https://www.mindmeister.com/users/channel/20411481" target="_blank">CHIBA YUKIHIRO</a></div>
なお、「プレゼントして埋め込む」は「プレゼンテーションとして埋め込む」の訳がちょっと失敗しているだけです。
ソースの URL に付与されている&live_update=1と&presentation=1がそれぞれ「ライブアップデート有効」「プレゼントして埋め込む」に対応しています。
このエントリで実際に使用しているコードは以下です。フレームの幅と高さを調整し、オプションはすべて無効化しています。
<iframe width="800" height="500" frameborder="0" src="https://www.mindmeister.com/maps/public_map_shell/1745726149/project-plan?width=800&height=500&z=auto&no_share=1&no_logo=1" scrolling="no" style="overflow: hidden; margin-bottom: 5px;">あなたのブラウザはディスプレイフレームに適していません。MindMeisterの<a href="https://www.mindmeister.com/1745726149/project-plan" target="_blank">Project Plan</a>を訪れてください。</iframe>
ソースに&no_share=1と&no_logo=1が付与されたほか、<div>タグが除去されています。
パブリック公開の取りやめ
参考までにパブリック公開を取りやめる手順を記載します。
[ 共有 ] から 「シェア設定」を選択します。
パブリック状態では「ウェブ上の人」がメンバーに含まれているため、右側にマウスオーバーした際に現れる × ボタンを押下して削除し、 [ 完了 ] を押下すれば取りやめができます。
終わりに
MindMeister で作成したマインドマップの埋め込み方法のご紹介でした。
以下のエントリで初めて埋め込みに挑戦したので、手順の備忘として本エントリを書きました。
思考の整理としてマインドマップを活用してみてはいかがでしょうか。
以上、千葉（幸）がお送りしました。
